<template>
	<view class="content">
		<view class="buyhead">
			<view class="pageHeader">
				抢购团
				<view class="generalBack" @click="backpage()">
					<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
				</view>
			</view>
			<view class="blueteam"></view>
			<view class="sorts">
				<view class="sortop">
					<view style="padding:0px 24upx;font-size: 24upx;color: #333;position: relative;" class="fundbox">
						<view v-if="fundList.length === 0">暂无抢到信息</view>
						<view style="width: 100%;position: absolute;top:0;left: 0;height: 30upx;" :class="{ marquee_top: animate }">
							<view v-for="(funditem, fundindex) in fundList" :key="fundindex">
								<view style="height: 30upx;line-height: 30upx;color: #EC6104;width: 100%;text-indent: 2em;" class="goods-info">
									恭喜
									<text>{{ funditem.username | phoneCut }}</text>
									抢中{{ funditem.goods_name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 价格筛选 -->
				<view class="navbar">
					<view v-for="(pritem, pindex) in priceList" :key="pindex" class="nav-item" :class="{current: priceIndex === pindex}"
					 @click="tabClick(pindex,pritem.id)">
						{{pritem.name}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="regoodbox">
			<!-- 抢购区 -->
			<view style="margin-top: 20upx;">
				<view v-if="qiangList.length === 0" class="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="empty-tips">暂无抢购商品~</view>
				</view>
				<view class="buyitem" v-for="(item, index) in qiangList" :key="index">
					<view class="flex aic jsb" style="padding-bottom:16upx;border-bottom: 2upx solid #eee;font-size: 26upx;">
						<view  class="flex aic" style="font-size: 28upx;color: #999;">
							<uni-countdown :show-day="false" :hour="0" :minute="0" :second="item.rob_minute" color="#FFFFFF"  v-if="item.partake_num >= item.min_rob&&item.completion_status==2"
							 background-color="#1D84E8" border-color="#1D84E8" :show-colon="false" />
							 <uni-countdown :show-day="false" :showInter="false" :hour="0" :minute="0" :second="item.rob_minute" color="#FFFFFF" v-else 
							  background-color="#999999" border-color="#999" :show-colon="false" />
						</view>
						<view>
							购买人数：
							<text style="color: #EC6104;">{{ item.partake_num == null ? 0 : item.partake_num }}</text>
							/{{ item.max_rob }}
						</view>
					</view>
					<view class="flex" style="position: relative;padding-top:20upx;">
						<view style="width: 146upx;height: 146upx;">
							<image :src="item.images" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="flex-1" style="font-size: 28upx;color: #333;">
							<view class="goods-info">{{ item.title }}</view>
							<view style="margin-top:10upx;font-size: 24upx;color: #EC6104;">
								说明：拼团满{{ item.min_rob }}人{{ parseInt(item.rob_minute / 60) }}分钟后开抢（满{{ item.max_rob }}人立即开抢,抢中人数：{{item.rob_number}}<text v-if="item.this_end_time!==0">,到{{item.this_end_time}}结束</text>）
							</view>
							<view style="color: #EC6104;font-size: 28upx;margin-top: 8upx;">
								￥{{ item.price }}
								<text style="color: #999;font-size: 24upx;margin-left: 8upx;" v-if="Number(item.integral)>0">({{ item.integral }}VS)</text>
							</view>
						</view>
					</view>
					<view class="flex aic jsb" style="margin-top: 12upx;">
						<view style="font-size:28upx;color: #666;">
							<view v-if="item.red_envelopes > 0">单个红包金额:{{ item.red_envelopes }}</view>
						</view>
						<view class="flex aic">
							<text style="color: #1D84E8;font-size: 28upx;margin-right: 16upx;">第{{ item.num }}期</text>
							<button :class="item.completion_status==1 || item.rush_status==1||item.lock==1?'disure defbtn':'sure defbtn'" @click="goodsbuy(item)">马上抢</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	export default {
		data() {
			return {
				userToken: '', // token
				phone: '',
				code: '',
				state: 0,
				priceIndex:-1,
				empty: null,
				// 滚动
				animate: false,
				transEmpty: null,
				chooseId:null,//头部选择的id
				// 抢购区列表
				qiangList: [],
				buypageindex: 0, //抢购的分页
				pagenum: 8, // 分页数量
				transpageindex: 0, //转让的分页
				transList: [], // 转让区列表
				fundList: [], // 中奖列表
				timere: '',
				lunbotime: '',
				searchString:'',//转让区搜索订单
				keywords:'',
				priceList:[],// 价格筛选
				loadingType: 0,
				count:false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "你成功的触碰了我的底线"
				},
				page_total:'',
				// 传过来的到底是油卡还是抢购团
				pass_id:null
			};
		},

		mounted() {

		},
		onShareAppMessage:function(obj){
		    return {
		        title: '转让区产品',
		        path:'/pages/hotfunc/transfer',
		        imageUrl: ''
		    }
		},
		activated() {},
		beforeDestroy() {
			clearInterval(this.timere);
		},
		onHide() {
			clearInterval(this.timere);
		},
		filters: {
			phoneCut: function(str) {
				let newStr = '';
				if (str == '' || str == null) {
					newStr = '****';
				} else {
					newStr = str.substr(0, 3) + '****' + str.substr(7);
				}
				return newStr;
			}
		},
		created() {
			if (this.lunbotime) {
				clearInterval(this.lunbotime);
			} else {
				this.lunbotime = setInterval(this.showMarquee, 2000);
			}
		},
		onShow() {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.get_sale_msg()
			// if (that.timere) {
			// 	clearInterval(that.timere);
			// } else {
			that.timere = setInterval(() => {
				that.get_sale_msg();
			}, 2000);
			
			// }
		},
		async onLoad(options) {
			let that = this;
			if(options.status){
				that.pass_id =options.status==1?'899':'894'
			}
			that.get_top_msg();
			that.get_price_data()
		},
		components: {
			uniCountdown
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.reLaunch({
					url:'../tab/index'
				})
			},
			//顶部tab点击
			tabClick(index,id) {
				let that = this
				that.priceIndex = index;
				that.chooseId = id
				that.buypageindex = 0
				clearInterval(that.timere)
				that.get_sale_msg(id)
				that.timere = setInterval(() => {
					that.get_sale_msg(id);
				}, 2000)
			},
			// 抢购区抢购进入产品详情页购买
			goodsbuy(item) {
				let that = this
				if (item.completion_status == 1) {
					uni.showToast({
						icon: 'none',
						title: '还未到下次抢购的时间'
					});
					return;
				}
				if (item.rush_status == 1) {
					uni.showToast({
						icon: 'none',
						title: '同一款产品每轮只能抢购一次，还有其他产品供您抢购'
					});
					return;
				}
				if(item.lock == 1){
					uni.showToast({
						icon: 'none',
						title: '产品被锁定，请等待解锁'
					});
					return;
				}
				uni.navigateTo({
					url: '../order/detail?type=quickbuy&id=' + item.id + '&item=' + JSON.stringify(item)+'&mystatus='+that.pass_id,
					animationDuration: 300
				});
			},
			// 头部轮播的信息
			get_top_msg() {
				let that = this;
				let pst = {
					status: 2,
					m: 0,
					n: 20
				};
				postAjax('Panicbuying/Panicbuying', pst, function(data) {
					that.fundList = data.data;
				});
			},
			// 头部轮播动画
			showMarquee: function() {
				this.animate = true;
				setTimeout(() => {
					this.fundList.push(this.fundList[0]);
					this.fundList.shift();
					this.animate = false;
				}, 500);
			},
			// 获取抢购营销区的信息
			async get_sele_data() {
				let that = this;
				uni.showLoading();
				let a = await that.get_sale_msg();
				for (let i of a) {
					let addd = await that.get_detail_data(i.id);
					i.delta = addd;
				}
				that.qiangList = a;
				if (that.qiangList.length == 0) {
					that.empty == 0;
				}
				uni.hideLoading();
			},
			// 获取抢购营销区的信息
			get_sale_msg(id) {
				let that = this
				let pst = {
					token: that.userToken,
					m: that.buypageindex,
					n: that.pagenum
				}
				if(id){
					pst.category_id = id
				}else{
					pst.category_id = that.pass_id
				}
				
				console.log(pst)
				
				// if(that.pass_id){
					
				// }
				postAjax('Panicbuying/panicbuyinglist', pst, function(data) {
					console.log(data.data)
					that.qiangList = data.data;
					if (that.qiangList.length == 0) {
						that.empty == 0;
					}
				});
			},
			// 获取抢购区价格筛选的数组
			get_price_data(){
				let that = this
				console.log(that.pass_id)
				postAjax('panicbuying/RushArea', {
					pid:that.pass_id
				}, function(data) {
					console.log(data)
					if(data.code==0){
						that.priceList= data.data
					}else{
						that.priceList= []
					}
				});
			},
			//查看每个抢购产品期数信息
			get_detail_data(id) {
				let that = this;
				return new Promise((resolve, reject) => {
					postAjax('Panicbuying/SeePanicBuyingPeriods', {
						goods_id: id
					}, function(data) {
						resolve(data.data);
					});
				});
			}
		}
	};
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #f9f9f9;
		position: relative;
		overflow: hidden;
	}
	.ser-input{font-size: 28upx;padding: 16upx 20upx;border-radius: 20vw;border:2upx solid #d9d9d9;width: 80%;}
	.blueteam {
		height:60upx;
	}
	.buyhead{
		width: 100%;
		padding-top: 40upx;
		background-color: #1d84e8;
		z-index: 100;
		position: fixed;
		left: 0;
		top:0
	}
	.pageHeader {
		height: 128upx;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 0;
		display: block;
		padding:0 40upx;
	}

	.disure {
		background: #d8d8d8;
	}

	.sure {
		background: linear-gradient(90deg, #ffa060 0%, #ec6104 100%);
	}

	.defbtn {
		padding: 0;
		margin: 0;
		display: block;
		font-size: 28upx;
		width: 170upx;
		border-radius: 10upx;
		height: 60upx;
		line-height: 60upx;
		color: #fff;
	}

	.defbtn::after {
		border: 0;
	}

	.regoodbox {
		padding:0 30upx;
		margin-top:390upx;
	}

	.buyitem {
		background-color: #fff;
		padding: 30upx 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
	}

	.flex-1 {
		flex: 1;
		margin-left: 16upx;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 420upx;
	}
	.sorts{
		position: absolute;
		width: 100%;
		position: absolute;
		z-index: 99999;
		top:160upx;
		left: 0;
	}
	.sortop {
		margin: 0 30upx;
		padding: 30upx 10upx 30upx;
		border-radius: 20upx;
		background-color: #fff;
		
		/* box-shadow: #d4e5ff 0upx 0upx 10upx 1upx; */
	}

	.sort>.flex-1 {
		flex: 1;
		position: relative;
	}

	.sort>.flex-1:nth-child(1)::after {
		content: '';
		width: 2upx;
		height: 100%;
		background-color: #eee;
		position: absolute;
		top: 0upx;
		right: 0;
	}

	.topactive {
		color: #1d84e8;
	}

	.eliplis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.timeicon {
		width: 46upx;
		height: 46upx;
		color: #fff;
		font-size: 30upx;
		background-color: #1d84e8;
		border-radius: 6upx;
		margin: 0 4upx;
		text-align: center;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #f9f9f9;
	}

	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}

	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	}

	.fundbox {
		height: 30upx;
		overflow: hidden;
	}

	.marquee_top {
		transition: all 0.5s;
		margin-top: -30upx;
	}
	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		padding: 0 10upx;
		margin: 20upx 30upx 30upx;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
		border-radius: 6upx;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}
	
	.current {
		color: #EC6104;
	}
	
	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}
</style>
